<template>
  <div style="margin-left: 20px">
    <div  style="color: #f30d0d;">----------- input-number计数器 -----------</div>
    <span style="color: #f30d0d;">基本描述: </span> 
    <p>:min="1" :max="10"。:step="2" 设置步长。 </p>
    <p>step-strictly属性接受一个Boolean。如果这个属性被设置为true，则只能输入步数的倍数。</p>
    <p>设置 precision= 【正整数】 属性可以控制数值精度，接收一个 Number。</p>

    <el-input-number v-model="num" :step="2" step-strictly precision= '2'  @change="handleChange" :min="1" :max="10" label="描述文字" :disabled="isdisabled"></el-input-number>
    <div v-if="isdisabled"><el-button type="success"  icon="el-icon-check" @click="changedisabled" >{{tishi}} </el-button></div>
    <div v-if="!isdisabled"><el-button type="danger" icon="el-icon-close"  @click="changedisabled">{{tishi}}</el-button></div>
    <br>

    <p>尺寸：额外提供了 medium、small、mini 三种尺寸的数字输入框</p>
    
    <el-input-number v-model="num1"></el-input-number>
    <el-input-number size="medium" v-model="num2"></el-input-number>
    <el-input-number size="small" v-model="num3"></el-input-number>
    <el-input-number size="mini" v-model="num4"></el-input-number>

    <br>
    <p>按钮位置: 设置 controls-position 属性可以控制按钮位置。</p>
    <el-input-number v-model="num5" label="哈哈哈1"  placeholder="哈哈哈2" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>


  </div>
</template>

<script>
    export default {
    data: () => ({
     num:1,
     num1:1,
     num2:1,
     num3:1,
     num4:1,
     num5:1,
     isdisabled:true,
     tishi:'禁止改变'
    }),
    methods: {
      handleChange(value) {
        console.log(value);
      },
      changedisabled(){
        if(this.isdisabled){
          this.tishi = '禁止改变'
        }else{
          this.tishi = '允许改变'  
        }
        this.isdisabled = (!this.isdisabled)
      }
    }
  }
</script>

<style>
  
</style>